<template>
	<view class="">
		<!-- <web-view src="https://anhui.hichain.com/yuntu/share/B7vqAr"></web-view> -->
		<view class="cu-form-group bg-white">
			<view class="title start-mark">位置</view>
			<picker @change="bindPickerChange" class="cuspicker" :value="ch_index" :range="mapList">
				<view class="picker cuspicker_item">{{ mapList[ch_index] }}</view>
			</picker>
		</view>

		<map
			style="width:100%;height:85vh;" 			:latitude="latitude"			:longitude="longitude"			scale="18"
			:markers="markers"			show-location="true"			@markertap="markertap"			@callouttap="markertap"
			@tap="tapMap"			enable-3D			show-compass			enable-traffic			:circles="circles"
			
		></map>
		<view class="pathNav" v-if="isPathNav">
			<view class="pathNav-name">
				<text>{{ selectedMap }}</text>
			</view>
			<view class="path" @tap="goPath">
				<image class="image" src="../../static/img/path.png" mode=""></image>
				<view>路线</view>
			</view>
		</view>
	</view>
</template>

<script>
import { hfMapPoint } from '@/utils/util.js';
import { checklocation, getLocation } from '@/utils/common.js';
export default {
	data() {
		return {
			ch_index: 0,
			markerId: 0,
			isPathNav: false,
			mapList: ['保税仓', '海关监管仓库', '仓站单证中心', '6#仓库', '5#仓库', '4#仓库', '海晨客服中心', '2#仓库', '1#仓库'],
			selectedMap: '',
			latitude: 31.724394, //纬度
			longitude: 117.194488, //经度
			circles: [
				{
					latitude: this.latitude,
					longitude: this.longitude,
					fillColor: '#1F3257', //'#C3D2F0'
					radius: 50,
					color: '#9FBAF2',
					strokeWidth: 2
				}
			],

			controls: [
				{
					id: 1, //控件id
					// iconPath: '../../static/img/control.png', //显示的图标
					position: {
						//控件在地图的位置
						left: 15,
						top: 15,
						width: 50,
						height: 50
					}
				}
			],
			markers: [],
			myLongitude:0,
			myLatitude:0,
			polyline: [
				{
					points: [
						{
							longitude: 0,
							latitude: 0,
						},
						{
							longitude: 0,
							latitude:0,
						}
					],
					color: '#FF0000DD',
					width: 2,
					dottedLine: true
				}
			],
			// navUrl:{},
		};
	},
	onLoad(e){
		console.log('123444eeee',e)
		this.markers = hfMapPoint;
		this.markertap(e)
	},
	methods: {
		bindPickerChange(e) {
			this.ch_index = e.detail.value;
			this.selectedMap = this.mapList[e.detail.value];

			let selectMarker = this.markers.find(v => {
				return v.title === this.selectedMap;
			});
			this.isPathNav = true;
			this.latitude = selectMarker.latitude;
			this.longitude = selectMarker.longitude;
		},
		markertap(e) {
			this.markerId = +e.markerId+1;
			this.latitude = this.markers[this.markerId].latitude;
			this.longitude = this.markers[this.markerId].longitude;
			this.selectedMap = this.markers[this.markerId].title;
			this.isPathNav = true;
			
		},
		tapMap(e) {
			this.isPathNav = false;
		},
		goPath() {
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				success: res => {
					if (res && res.latitude) {
						this.polyline[0].points[0].latitude = res.latitude;
						this.polyline[0].points[0].longitude = res.longitude;
						this.myLatitude=res.latitude;
						this.myLongitude=res.longitude;
						this.polyline[0].points[1].latitude=this.latitude;
						this.polyline[0].points[1].longitude=this.longitude;
						console.log(res.latitude,res.longitude)
						console.log('this.polyline',this.polyline)
						
						let plugin = requirePlugin('routePlan');
						let key = 'UPGBZ-E423R-MXFWJ-WCNH7-BENUH-EEFUZ';  //使用在腾讯位置服务申请的key
						let referer = '海晨智能园区';   //调用插件的小程序的名称
						let startPoint = JSON.stringify({  //起点
						  'name': '',
						  'latitude': res.latitude,
						  'longitude': res.longitude,
						});
						let endPoint = JSON.stringify({  //终点
						  'name': this.selectedMap,
						  'latitude': this.latitude,
						  'longitude': this.longitude
						});
						wx.navigateTo({
						  url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
						});
					}

				}
			});
		}
	}
};
</script>

<style lang="scss">
.cu-form-group {
	.title {
		padding-left: 10px;
	}
}
.bg-white {
	background-color: #ffffff;
	z-index: 8;
}
.pathNav {
	height: 120px;
	width: 100vw;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	box-shadow: 0 -1px 2px #cccacd;
	position: relative;
	bottom: 40px;

	background-color: #ffffff;
	.pathNav-name {
		width: 90%;
		height: 60px;
		margin: 0 auto;
		padding: 20px 0;
		border-bottom: 1px solid #f3f3f3;
		text-align: left;
		font-size: 17px;
	}
	.path {
		width: 70px;
		height: 70px;
		border: 1px solid #4287ff;
		border-radius: 50%;
		box-shadow: 0 2px 2px #c4c3c5;
		position: absolute;
		right: 35px;
		top: -35px;
		background-color: #4287ff;
		color: #ffffff;
		font-weight: normal;
		.image {
			margin-top: 10px;
			height: 30px;
			width: 30px;
		}
	}
}
</style>
